<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname: 'zhangsan',
      dog: {
        name: '旺财',
        age: 2
      }
    }
  },
  // 侦听器，要写到和 data 平级的 watch 里面
  watch: {
    // 1. ----------- 函数写法 -----------
    // uname (newVal, oldVal) {
    //   console.log(newVal, oldVal)
    // }
    // 2. ----------- 对象写法 -----------  （写成对象，就是为了加 immediate 或 deep 选项）
    uname: {
      handler (newVal, oldVal) {
        // 写对象格式，handler必须写，名字固定
        console.log(newVal, oldVal)
      },
      immediate: true // 加入这个选项，表示立即侦听（通俗的说，打开页面马上获取初始值）
    },

    // dog: {
    //   handler (newVal) {
    //     console.log(newVal)
    //   },
    //   deep: true // 深度侦听。用于侦听对象的属性变化
    // }

    // ------------- 只侦听对象的某个属性 --------------
    'dog.age' (newVal) {
      console.log(newVal)
    }
  }
}
</script>

<style></style>
